<template>
  <div class="purchase-page">
    <div class="header">
      <div>
        <span style="font-size: 20px">采购单列表</span>
      </div>
      <div>
        <el-button size="mini" type="primary" @click="onAdd('新增')"
          >新增</el-button
        >
      </div>
    </div>
    <div class="body">
      <el-table :data="data" style="width: 100%" stripe>
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="DispalyName" label="显示名称"> </el-table-column>
        <el-table-column prop="ExcelColumnName" label="表格名称">
        </el-table-column>
        <el-table-column prop="PropertyName" label="字段名称">
        </el-table-column>
        <el-table-column prop="PropertyTypeStr" label="类型"> </el-table-column>
        <el-table-column prop="DataTable" label="数据库表名称">
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template v-slot="{ row }">
            <el-button size="mini" @click="onEdit(row, '编辑')">编辑</el-button>

            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @confirm="onDel(row)"
              style="margin-left: 10px"
            >
              <el-button type="danger" slot="reference" size="mini">
                删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="dialog">
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="35%"
        :before-close="dialogBeforeClose"
      >
        <el-form ref="form" :model="form" label-width="100px" :rules="rules">
          <el-form-item label="字段名称" prop="PropertyName">
            <!-- <el-input v-model="form.PropertyName"></el-input> -->
            <el-select
              v-model="form.PropertyName"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in propertyList"
                :key="item.PropertyName"
                :label="item.DisplayName"
                :value="item.PropertyName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="表格名称">
            <el-input v-model="form.ExcelColumnName"></el-input>
          </el-form-item>
          <el-form-item label="显示名称">
            <el-input v-model="form.DispalyName"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select
              v-model="form.PropertyTypeValue"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据库表名称">
            <el-input v-model="form.DataTable"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button size="mini" type="primary" @click="onSubmit"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getPPSListApi, getPurchasePropertyTypeListApi } from "@/api/purchase";
import { SettingApi } from "@/api/dashboard";
export default {
  data() {
    return {
      data: [],
      queryData: {
        PropertyName: "all",
        DispalyName: "",
      },
      dialogVisible: false,
      title: "",
      form: {
        PropertyName: "",
        ExcelColumnName: "",
        DispalyName: "",
        PropertyTypeValue: "",
        DataTable: "",
        isShow: false,
        isProperty1: false,
        isProperty2: false,
      },
      typeList: [
        { label: "文本", value: 0 },
        { label: "数字 ", value: 1 },
        { label: "下拉框", value: 2 },
        { label: "树形结构", value: 3 },
      ],
      propertyList: [],
      rules: {
        PropertyName: [
          { required: true, message: "请选择", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getPPSList();
  },
  methods: {
    async getPPSList() {
      const res = await getPPSListApi(this.queryData);
      console.log(res);
      this.data = res.data;
    },
    async getPurchasePropertyTypeList() {
      const res = await getPurchasePropertyTypeListApi(0);
      console.log(res);
      this.propertyList = res.data;
    },
    // !新增
    onAdd(type) {
      this.title = type;
      this.getPurchasePropertyTypeList();
      this.dialogVisible = true;
    },
    // ! 编辑
    onEdit(row, type) {
      console.log(row);
      this.title = type;
      this.getPurchasePropertyTypeList();
      this.form = row;
      this.dialogVisible = true;
    },
    // ! 删除
    onDel(row) {
      console.log(row);
    },
    // ! 保存
    async onSubmit() {
      this.$refs.form.validate(async (isOk) => {
        if (isOk) {
          if (this.title === "编辑") {
            const res = await SettingApi({
              postpara: {
                posttype: "EditPurchaseProperty",
              },
              ureentity: {
                ...this.form,
              },
            });
            console.log(res);
            if (res.data === "0100") {
              this.$message.success("成功");
            } else {
              this.$message.error("失败");
            }
          } else if (this.title === "新增") {
            const res = await SettingApi({
              postpara: {
                posttype: "SavePurchaseProperty",
              },
              ureentity: {
                ...this.form,
              },
            });
            console.log(res);
            if (res.data === "0100") {
              this.$message.success("成功");
            } else {
              this.$message.error("失败");
            }
          }
          this.dialogBeforeClose();
        }
      });
    },

    dialogBeforeClose() {
      this.form = {
        PropertyName: "",
        ExcelColumnName: "",
        DispalyName: "",
        PropertyTypeValue: "",
        DataTable: "",
        isShow: false,
        isProperty1: false,
        isProperty2: false,
      };
      this.getPPSList();
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.purchase-page {
  background-color: #fff;
  padding: 20px;

  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}
</style>